<template>
<h3>列表渲染</h3>
<p v-for="item in getList">
  {{ item }}
</p>
  <h4>普通多数据渲染</h4>
  <div v-for="value in getManyList">
    <label>用户名: {{ value.user_name }}</label>
    <img :src="value.img" style="width: 200px;">
    <label>创建时间: {{value.create_time}}</label>
  </div>
  <h4>支持index下标的多数据渲染</h4>
<!--  这里的下标也就是数组的下标,从0开始-->
  <div v-for="(value,index) in getManyList">
    <p>{{index}}</p>
    <p>{{value.user_name}}</p>
  </div>
  <h4>同时也可以使用of代替in</h4>
  <div v-for="(value,index) of getManyList">
    <p>of_index:{{index}}</p>
    <p>of_用户名:{{value.user_name}}</p>
  </div>
  <h4>遍历对象</h4>
<!--  这里遍历会把对象的所有内容都遍历显示-->
  <div v-for="item of userInfo">
    {{ item }}
  </div>
  <h4>多参数遍历对象</h4>
  <div v-for="(value,key,index) of userInfo">
    {{ index }}
    {{ key }} :
    {{ value }}
  </div>

  <h3>遍历的key选定</h3>
  <h4>一维数组的处理 getList</h4>
  <div v-for="(item,index) of getList" :key="index">
    {{index}} - {{item}}
  </div>

  <h4>二维数组绑定key</h4>
  <div v-for="item of getManyList" :key="item.id">
    {{ item.id }} - {{ item.user_name}}
  </div>
</template>
<script>
export default {
  data() {
    return{
      getList: ["医生","老师","农民"],
      getManyList: [
        {
          "id": 2,
          "user_name": "pony",
          "user_chinese_name": "马化腾",
          "create_time": "2024-04-01 14:47:25",
          "img": "https://img1.baidu.com/it/u=3538768870,2867783051&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
        },
        {
          "id": 3,
          "user_name": "yun",
          "user_chinese_name": "马云",
          "create_time": "2024-04-01 14:47:25",
          "img": "https://img2.baidu.com/it/u=2834414867,1134983287&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
        }
      ],
      // 对象
      userInfo: {
        name: "张三",
        age: 19
      }
    }
  }
}
</script>